<!--
 * @Description: 选择农场页面
-->
<template>
  <div class="choose-company">
    <Header />
    <div class="main-content" :class="{hidden: showSystemChooseModal}">
      <el-scrollbar wrap-class="scrollbar-wrapper">
        <div class="slidebar">
          <div class="list">
            <div
              v-for="(item, index) in list"
              :key="index"
              class="item"
              :class="activeIdx === index ? 'active' : ''"
              @click="changeActiveIdx(index, item)"
            >
              {{ item }}
            </div>
          </div>
        </div>
      </el-scrollbar>
      <div v-if="showTopList" class="first-tankuang">
        <div class="farm-select">
          <div v-for="(item,ind) in organizationList" :key="ind" class="farm-item">
            <div class="pic" @click="chooseTopOrganization(item)">
              <!-- <div class="child-farm" @click.stop="selectfarmchild(item)">选择下级</div> -->
            </div>
            <div class="title">{{ item.organizationName }}</div>
            <div class="loc">
              <i class="el-icon-location"></i>
              <div class="addr">{{ item.address }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="tree-select">
        <div class="tree-content">
          <div class="content-title">公司组织架构</div>
          <div class="content-tree">
            <Siderbar :organization-list="orgTreeList" @chooseCompany="chooseOrganization" />
          </div>
        </div>
      </div>
      <div class="farm-select">
        <div v-for="(item,ind) in orgList" :key="ind" class="farm-item">
          <div class="pic" @click="chooseOrganization(item)">
            <!-- <div class="child-farm" @click.stop="selectfarmchild(item)">选择下级</div> -->
          </div>
          <div class="title">{{ item.organizationName }}</div>
          <div class="loc">
            <i class="el-icon-location"></i>
            <div class="addr">{{ item.address }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 选择系统 -->
    <div class="system-choose-modal" v-if="false" :class="{ active: showSystemChooseModal }">
      <div class="system-choose-box">
        <div class="system-content">
          <div class="system-name">系统列表</div>
          <div class="system-list">
            <!-- 卡片式 -->
            <div v-for="(item,index) in systemList" :key="index" class="system-choose-item" :class="item.virtualSystemNo" @click="chooseSystem(item)">
              <div class="img">
                <!-- <p>{{ item.virtualSystemName }}</p>
                <p v-if="item.virtualSystemName === '生产管理系统'">{{ "OPERATION MANAGEMENT" }}</p>
                <p v-if="item.virtualSystemName === '溯源管理系统'">{{ 'TRACEABILITY MANAGEMENT' }}</p>
                <p v-if="item.virtualSystemName === '运营管理系统'">{{ 'PRODUCTION MANAGEMENT' }}</p> -->
              </div>
              <div class="name">{{ item.virtualSystemName }}</div>
            </div>
          </div>
        </div>
        <div class="system-content">
          <div class="system-name">大屏列表</div>
          <div class="system-list">
            <!-- 卡片式 -->
            <div v-for="(item,index) in screenList" :key="index" class="system-choose-item" @click="chooseScreen(item)">
              <div class="img" :class="getfarm(item.farmingTypeNo)">
                <b class="img-p">点击进入</b>
              </div>
              <div class="name">{{ item.bigScreenName }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="back-btn" @click="showSystemChooseModal=false">返回</div>
    </div>
    <!-- <div class="copyright">
      版权所有：中科台达（浙江）信息技术有限公司｜ Copyright © 2019-2025
      casdelta.com All Right Reserved
      <a href="https://beian.miit.gov.cn" target="view_window">
        备案号：浙ICP备19034790号-5</a>
    </div> -->
  </div>
</template>
<script>
import Header from "@/layout/components/Header/index";
import userService from "@/api/user/index";
import store from "@/store";
import permission from "@/store/modules/permission";
import { getToken, removeToken, setToken } from "@/utils/auth";
import Siderbar from "./components/Siderbar";
import getfarmtypelistmethod from "@/api/agricultural-type-manage";
export default {
  name: "ChoseCompany",
  components: { Header, Siderbar },
  data() {
    return {
      selectstau: 1, // 1为选择顶级组织结构，2为选择选择农场
      ischildfarmstau: false, // 展示子农场
      showSystemChooseModal: false, // 选择系统弹窗
      showTopList: true, // 展示顶级组织
      organizationList: [], // 顶级组织结构列表
      orgList: [], // 组织列表
      orgTreeList: [], // 树状组织列表
      activeIdx: "",
      search: "",
      farmList: [
        { organizationName: "星光农场", organizationNo: 1 }
      ],
      // 星光农场下的组织
      // 被选择的id
      nowChildFarmSelectIdList: [],
      // 列表信息
      childfarmlist: [],
      // true 启用动态路由 false 启用静态路由
      nowmenutype: permission.nowmenutype,
      systemList: [],
      screenList: [],
      farmingTypeNo: [],
      farmtypelist: []
    };
  },
  computed: {
    list() {
      let arr = [...Array(26).keys()].map(i => String.fromCharCode(i + 65));
      arr.unshift("#");
      return arr;
    }
  },
  watch: {},
  mounted() {
    this.tologin()
    // 查询农场
    this.getFarmList();
    if (this.$store.state.permission.addRoutes.length > 0) {
      // 判断是否已经刷新
      // location.reload();
      history.go(0)
    }
  },
  methods: {
    // 查询左侧树状列表
    queryTreeByOrganizationNoList() {
      let list = this.orgList.map(el => { return el.organizationNo });
      userService.queryTreeByOrganizationNoList(list).then(res => {
        if (res.code !== 1) {
          return;
        }
        this.orgTreeList = res.data || [];
        if (this.orgTreeList[0]) {
          setToken("organizationName", this.orgTreeList[0].organizationName)
        }
      })
    },
    async chooseTopOrganization(item) {
      setToken("topOrganization", item.organizationNo)
      if (!getToken("databaseName")) {
        let res = await userService.queryDatabaseNameByOrganizationNo(item.organizationNo);
        setToken('databaseName', res.data.databaseName);
      }
      // console.log('getToken', getToken('databaseName'))
      let ress = await userService.queryOrganization(item.organizationNo)
      if (ress.code !== 1) {
        return;
      }
      this.orgList = ress.data || [];
      if (this.orgList.length === 1) {
        // 我不知道改得有什么问题
        setToken("organizationNo", ress.data[0].organizationNo);
        // 查询下一级
        let orgliststring = await this.getchildnodeidlist(ress.data[0].organizationNo)
        // console.log(orgliststring)
        // let orgidlisttwo
        // if (orgliststring.length > 0) {
        //   orgidlisttwo = item.organizationNo + ',' + orgliststring
        // } else {
        //   orgidlisttwo = item.organizationNo
        // }
        setToken("organizationList", orgliststring)
        await this.openSystemChooseModal(ress.data[0].organizationNo);

        this.queryTreeByOrganizationNoList();
        this.showTopList = false;
      } else {
        // 我不知道改得有什么问题
        setToken("organizationNo", ress.data[0].organizationNo);
        // 查询下一级
        let orgliststring = await this.getchildnodeidlist(ress.data[0].organizationNo)
        setToken("organizationList", orgliststring)
        this.queryTreeByOrganizationNoList();
        this.showSystemChooseModal = false
        this.showTopList = false;
      }

      // })
    },
    tologin() {
      let tr = this.$route.query;
      if (tr.account) {
        let loginForm = {
          account: decodeURIComponent(tr.account),
          password: tr.password
        }
        this.$router.push({ path: "/login", query: loginForm })
      }
    },
    // 获取顶级组织结构id
    getFarmList() {
      // 获取顶级组织结构id,
      userService.organizationTop().then(
        res => {
          this.organizationList = res.data
          if (res.length === 0 || res.data === []) {
            this.$message.warning("该账户下无公司，请联系管理员！")
            removeToken("token")
            this.$router.push({ path: "/login" })
          } else if (this.organizationList.length === 1) {
            this.goToTheFarm(this.organizationList[0])
          }
        }
      )
    },
    // 点击农场:rouertpid用于获取菜单
    async goToTheFarm({ organizationNo, organizationName }) {
      // console.log('goToTheFarm', organizationNo, organizationName);
      // v3/virtualSystem/queryOrganization?topOrganizationNo=${e.organizationNo}
      // 存储顶级农场id
      // if (!getToken('databaseName')) {
      // console.log(organizationNo)
      setToken("topOrganization", organizationNo)
      // console.log(getToken('topOrganization'))
      await this.chooseTopOrganization({ organizationNo: organizationNo })
      // }
    // 查询用户编号
    this.getSystemzation();
      // setToken("organizationMark", organizationMark)

      // setToken("routerpid", rouertpid)
      // // 存储承租户的parentid,当isTenant===true,settoken-parentid
      // // ----
      // if (isTenant) {
      //   // 判断有没有下级
      //   userService.gettreeslist(organizationNo).then(
      //     // userService.farmListbyOrganizationId(this.farmList[0].organizationNo).then(
      //     res => {
      //       let childlistone = res.data
      //       // this.childfarmlist = this.filterArrForKey(childlistone)
      //       setToken("parentId", childlistone[0].parentId)
      //     }
      //   )
      // }
      // // --------------
      // // 存储所有组织结构字符串
      // // console.log(rouertpid, this.nowmenutype, this.$router.push({ name: "ZhControlView" }))

      // 显示选择系统页面
    },
    async chooseOrganization(item) {
      // 我不知道改得有什么问题
      // 查询下一级
      let orgliststring = await this.getchildnodeidlist(item.organizationNo)
      // console.log(item, orgliststring)
      // let orgidlisttwo
      // if (orgliststring.length > 0) {
      //   orgidlisttwo = item.organizationNo + ',' + orgliststring
      // } else {
      //   orgidlisttwo = item.organizationNo
      // }
      setToken("organizationList", orgliststring)
      setToken("organizationNo", item.organizationNo)
      await this.openSystemChooseModal(item.organizationNo);
      if (item) {
        setToken("organizationName", item.organizationName)
      }

      // this.queryTreeByOrganizationNoList();
      // this.showTopList = false;
      // })
    },
    cascaderChange(e) {
      // console.log(e)
    },
    // 选择公司时database
    getdataname(id) {
      // 获取databasename 并且存储session
      userService.getdatabasename(id).then(
        res => {
          let databaseName = res.data.databaseName
          setToken("databaseName", databaseName)
        }
      )
    },
    // 通过接口查子节点id
    async getchildnodeidlist(id) {
      let newArr = []
      await userService.getchildidlist(id).then(
        res => {
          newArr = res.data
          // newArr.splice(0, 1)
          return newArr
        }
      )
      return newArr
    },
    // 循环过滤树形数组
    filterArrForKey(arr) {
      let newArr = []
      if (arr === []) {
        return
      }
      newArr = arr.map(item => {
        if (item.child.length > 0) {
          item = {
            ...item,
            child: this.filterArrForKey(
              item.child
            )
          }
        } else {
          delete item.child
        }
        return item
      })
      newArr = newArr.filter(item => item != null)
      return newArr
    },
    // ---侧边栏abcd选择，然而并没什么用
    changeActiveIdx(idx, item) {
      this.activeIdx = idx;
      this.search = item;
      // console.log(this.search);
    },

    // 拉取系统选择界面
    openSystemChooseModal(no) {
      this.showSystemChooseModal = true;
      userService.queryVirtualSystem(no).then(res => {
        if (res.code !== 1) {
          return;
        }
        this.systemList = res.data.filter(item => {
          return item.virtualSystemNo !== 'app'&&item.virtualSystemNo !== 'equipApp';
        })
        this.systemList.forEach(item => {
            if(item.virtualSystemNo === 'equip') {
              this.chooseSystem(item)
            }
          })
      })
      userService.getOrganizationBigScreen(no).then(res => {
        if (res.code !== 1) {
          return;
        }
        this.screenList = res.data || [];

      })
    },
    // 选择系统
    chooseSystem(item) {
      setToken("virtualSystemNo", item.virtualSystemNo)
      if (item.virtualSystemName === '农业设备系统') {
        // 让动态路由重新加载
        if (this.nowmenutype) {
          store.dispatch("permission/generateRoutes").then(res => {
            this.$router.push({ name: `${res[0].children[0].name}` });
          })
        } else {
          this.$router.push({ name: "PhysicalUnionData" });
        }
        this.getfarmtypes()
      } else {
        let c = JSON.parse(getToken("userInfo"));
        let url =
        `${process.env.VUE_APP_webUrl}agricultural-unified-login/#/login?token=${c.account +'&' + c.password}&organizationNo=${sessionStorage.organizationNo}`
        window.open(url, '_blank')
      }
    },
    async getfarmtypes() {
      let leng = getToken("organizationNo");
      const res = await getfarmtypelistmethod.ownFarmingTypelist({
        organizationNo: leng
      });
      if (res.code === 0) {
        this.$message.error("当前农业类型获取失败");
      } else {
        setToken("farmingTypeNo", res.data[0]?.farmingTypeNo);
      }
    },
    chooseScreen(item) {
      let c = JSON.parse(getToken("userInfo"));
      let zhurl = `${item.url}?account=${c.account}&password=${c.password}&organizationNo=${sessionStorage.organizationNo}`;
      window.open(zhurl, '_blank')

    },
    async getSystemzation() {
      const { data: res } = await userService.getSystemzation();
      this.username = res?.nickname;
      setToken("personNo", res.personNo || "");
      // const { data: tenant } = await tenantService.querysesByCondition({ organizationNo: sessionStorage.organizationNo, personNo: res.personNo })
      // if (tenant.length > 0) {
      //   setToken('lesseeNo', tenant[0].lesseeNo)
      //   tenantService.querybindCache(tenant[0].lesseeNo)
      // }
    },
    getfarm(e) {
      if (e) {
        // console.log(e)
        let farming = ''
        switch (e) {
          case "dt":
            farming = "dt";
            break;
          case "dp":
            farming = "dp";
            break;
          case "gc":
            farming = "gc";
            break;
          case "sc":
            farming = "sc";
            break;
          case "":
            break;
        }
        return farming
      }
    }
  }
};
</script>

<style scoped lang="scss">
@import "~@/styles/variables.scss";
$slidebarWidth: 40px;
$highBule: rgb(0,235,208);
@keyframes borderbg {
  from {
    border-radius: 0;
  }
  to {
    background-color: #fff;
    color: #333;
    border-radius: 20px;
  }
}

.choose-company{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;

  ::v-deep(.header){
    flex-shrink: 0;
  }
  .main-content{
    height: calc(100% - 84px);
    background-color: #003947;
    display: flex;
    justify-content: space-between;
    .tree-select{
      width: 240px;
      height: 100%;
      padding: 16px;
    }
    .farm-select{
      width: calc(100% - 280px);
      height: 100%;
      display: flex;
      // justify-content: center;
      // align-items: center;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-y: auto;
      .farm-item {
        width: 30%;
        height: 300px;
        position: relative;
        margin-bottom: 20px;
        margin-top: 20px;
        // margin-right: 1.5%;
        // margin-left: 1.5%;
        background: rgba(0, 110, 145, 0.4);
        border: 1px solid #b9d6de;
        color: #fff;
        padding: 15px;
        padding-bottom: 10px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transition: 0.5s;
        &:nth-child(4n) {
          margin-right: 0;
        }
        &:hover {
          transform: scale(1.05);
        }
        .pic {
          width: 100%;
          height: 80%;
          border: 1px solid #b9d6de;
          // background-image: url("~@/assets/index-bgc.png");
          background-image:url(https://img.js.design/assets/img/613074df79456d9eec79f371.jpg);
          background-color: #003947;
          background-size: cover;
          background-repeat: no-repeat;
          display: flex;
          justify-content: center;
          align-items: center;
          .child-farm {
            width: 97px;
            height: 26px;
            background: linear-gradient(180deg, rgba(0, 193, 254, 1) 0%, rgba(41, 177, 220, 1) 57.22%, rgba(51, 207, 255, 1) 100%);
            box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.26);
            border-radius: 5px;
            color: rgba(255, 255, 255, 1);
            font-size: 16px;
            text-align: center;
            line-height: 26px;
          }
        }
        .title {
          width: 100%;
          text-align: center;
          font-size: 0.8vw;
          margin: 5px 0;
        }
        .loc {
          width: 100%;
          display: flex;
          justify-content: center;
          font-size: 0.8vw;
          i {
            color: #56845b;
            font-size: 20px;
            margin-right: 5px;
          }
        }
      }
    }

    .el-scrollbar{
      height: 100%;
      width: $slidebarWidth;
      background-color: #006988;
      .slidebar {
        width: $slidebarWidth;
        height: 100%;
        // overflow-y: auto;
        .list {
          width: 100%;
          height: 100%;
          border-radius: 50px;
          display: flex;
          flex-direction: column;
          .item {
            width: $slidebarWidth;
            height: $slidebarWidth;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
            &:hover {
              animation-name: borderbg;
              animation-iteration-count: 1;
              animation-fill-mode: forwards;
              animation-duration: 0.5s;
            }
          }
          .active {
            font-weight: bold;
            background-color: #fff;
            color: #333;
            border-radius: 50px;
          }
        }
      }
    }
  }
}

.tree-select{
  .tree-content{
    height: 100%;
    background: $headerBg;
    .content-title{
      line-height: 50px;
      color: #fff;
      text-align: center;
      border-bottom: 1px dashed #fff;
    }
    .content-tree{
      height: calc(100% - 50px);
    }
  }
}

.first-tankuang{
  width: 100%;
  height: calc(100% - 24px);
  background-color: #003947;
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;

  .farm-select{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .farm-item {
      width: 400px;
      height: 300px;
      position: relative;
      margin-right: 20px;
      margin-bottom: 20px;
      margin-top: 20px;
      background: rgba(0, 110, 145, 0.4);
      border: 1px solid #b9d6de;
      color: #fff;
      padding: 15px;
      padding-bottom: 10px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: 0.5s;
      &:nth-child(4n) {
        margin-right: 0;
      }
      &:hover {
        transform: scale(1.05);
      }
      .pic {
        width: 100%;
        height: 80%;
        border: 1px solid #b9d6de;
        // background-image: url("~@/assets/index-bgc.png");
        background-image:url(https://img.js.design/assets/img/613074df79456d9eec79f371.jpg);
        background-color: #003947;
        background-size: cover;
        background-repeat: no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
        .child-farm {
          width: 97px;
          height: 26px;
          background: linear-gradient(180deg, rgba(0, 193, 254, 1) 0%, rgba(41, 177, 220, 1) 57.22%, rgba(51, 207, 255, 1) 100%);
          box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.26);
          border-radius: 5px;
          color: rgba(255, 255, 255, 1);
          font-size: 16px;
          text-align: center;
          line-height: 26px;
        }
      }
      .title {
        width: 100%;
        text-align: center;
        font-size: 0.8vw;
        margin: 5px 0;
      }
      .loc {
        width: 100%;
        display: flex;
        justify-content: center;
        font-size: 0.8vw;
        i {
          color: #56845b;
          font-size: 20px;
          margin-right: 5px;
        }
      }
    }
  }
}

.three-tankuang {
  width: 100%;
  height: calc(100% - 24px);
  background-color: rgba(228, 228, 228, 0.5);
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  .childcompany-list {
    border-radius: 9px;
    width: 590px;
    height: 250px;
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, 1);
    .org-title{
          background-color: rgba(0, 110, 145, 1);
          border-top-left-radius: 9px;
          border-top-right-radius: 9px;
          border-bottom-right-radius: 0px;
          border-bottom-left-radius: 0px;
          height: 60px;
          // border-bottom: #fff 1px solid;
          color: #fff;
          padding-left: 20px;
          font-size: 23px;
          display: flex;
          align-items: center;
          .sel-te{
            padding-left: 10px;
            line-height: 27px;
            height: 27px;
            border-left: #fff 4px solid;
            color: #fff;
            font-size: 23px;
          }
    }
    .select-main{
      width: 500px;
      margin: 50px auto;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 9px;
      .far-sel {
        width: 300px;
        .el-cascader{
          width: 300px;
        }
      }
      .toindex-but {
        margin-left: 20px;
        width: 50px;
        height: 32px;
        cursor: pointer;
        color: #fff ;
        line-height: 32px;
        white-space: nowrap;
        text-align: center;
        background-color: #7fd354;
        border-top-left-radius: 0px;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
        border-bottom-left-radius: 0px;
      }
      .quxiao-but {
        margin-left: 10px;
        width: 50px;
        height: 32px;
        cursor: pointer;
        color: #fff ;
        line-height: 32px;
        white-space: nowrap;
        text-align: center;
        background-color: #c6c938;
        border-top-left-radius: 0px;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
        border-bottom-left-radius: 0px;
      }
    }
  }

}
.system-choose-modal {
  width: calc(100% - 40px);
  height: calc(100% - 84px);
  background-color: #003947;
  position: absolute;
  top: 60px;
  left: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  opacity: 0;
  transition: all .5s;
  pointer-events: none;
  &.active{
    opacity: 1;
    pointer-events: auto;
  }
  .back-btn{
    position: absolute;
    right: 50px;
    top: 50px;
    color: $highBule;
    cursor: pointer;
  }
  .system-choose-box{
    width: 100%;
    height: 100%;
    background: rgba(31,123,148, 0.4);
    padding: 12px 0;
    .system-content{
      height: 50%;
      position: relative;
      &::after{
        content: "";
        position: absolute;
        width: calc(100% - 120px);
        height: 1px;
        background: rgb(0, 104, 108);
        top: 25px;
        left: 85px;
      }
      .system-name{
        color: $highBule;
        height: 30px;
        line-height: 30px;
        position: relative;
        padding-left: 10px;
        top: 10px;
        &::before{
          content: "";
          width: 3px;
          height: 30px;
          position: absolute;
          left: 0;
          top: 0;
          background: $highBule;
        }
        &::after{
          content: "";
          position: absolute;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: $highBule;
          top: 11px;
          left: 85px;
          z-index: 1;
          box-shadow: 0 0 5px $highBule;
        }
      }
      .system-list{
        width: 100%;
        height: 90%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow-x: auto;
        .system-choose-item{
          color: #fff;
          text-shadow: 2px 2px 5px rgab(255, 255, 255, 0.5);
          width: 20%;
          height: 60%;
          min-width: 20%;
          transition: all 0.5s;
          position: relative;
          cursor: pointer;
          &.sy {
            .img{
            height: 100%;
            background:url('~@/assets/sys.png') bottom center no-repeat;
            // background-size: 92% 80%;
            background-size: 100% auto;
          }
          }
          &.sc {
            .img{
            height: 100%;
            background:url('~@/assets/scs.png') bottom center no-repeat;
            background-size: 100% auto;
          }
          }
          &.yy {
            .img{
            height: 100%;
            background:url('~@/assets/yys.png') bottom center no-repeat;
            // background-size: 92% 80%;
            background-size: 100% auto;
          }
          }
          .img{
            height: 100%;
            // border: 1px solid #25bda9;
            background:url('~@/assets/backmsg.png') center center no-repeat;
            background-size: 92% 80%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            align-content: center;
            p {
              width: 100%;
              text-align: center;
              padding: 2px 0;
              margin: 2px 0;
              color: #003947;
            }
            p:first-child {
              width: 100%;
              text-align: center;
              padding: 5px 0;
              margin: 2px 0;
              color: #fffff0;
              position: absolute;
              top: -1px;
              background: #25bda9;
              letter-spacing: 2px;
              font-size: 17px;
            }
            p:last-child {
              width: 100%;
              text-align: center;
              padding: 5px 0;
              margin: 2px 0;
              color: #fffff0;
              position: absolute;
              bottom: -1px;
              background: #00000060;
              letter-spacing: .5px;
              font-size: 15px;
            }
            align-items: center;
          }
          .name{
            text-align: center;
            font-size: 16px;
            line-height: 40px;
          }
          &:hover{
            transform: scale(1.1);
          }
          &:not(:last-child){
            margin-right: 30px;
          }
        }
      }
    }
    .system-content:nth-child(2){
      height: 50%;
      position: relative;
      &::after{
        content: "";
        position: absolute;
        width: calc(100% - 120px);
        height: 1px;
        background: rgb(0, 104, 108);
        top: 25px;
        left: 85px;
      }
      .system-name{
        color: $highBule;
        height: 30px;
        line-height: 30px;
        position: relative;
        padding-left: 10px;
        top: 10px;
        &::before{
          content: "";
          width: 3px;
          height: 30px;
          position: absolute;
          left: 0;
          top: 0;
          background: $highBule;
        }
        &::after{
          content: "";
          position: absolute;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: $highBule;
          top: 11px;
          left: 85px;
          z-index: 1;
          box-shadow: 0 0 5px $highBule;
        }
      }
      .system-list{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .system-choose-item{
          color: #fff;
          text-shadow: 2px 2px 5px rgab(255, 255, 255, 0.5);
          min-width: 316px;
          max-width: 316px;
          height: 220px;
          transition: all 0.5s;
          cursor: pointer;
          .img{
            height: 200px;
            width: 316px;
            // border: 1px solid #1f9b93;
            background:url(https://img.js.design/assets/img/613074df79456d9eec79f371.jpg) center center no-repeat;
            background-size: auto 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            align-content: center;
            b {
              background: #00000060;
              padding: 5px 15px;
              display: none;
            }
            &.dt {
              background:url('~@/assets/farm/dts.png') center center no-repeat;
              background-size: auto 100%;
              // background-size: 280px 140px;
            }
            &.dp {
              background:url('~@/assets/farm/dps.png') center center no-repeat;
              background-size: auto 100%;
              // background-size: 280px 140px;
            }
            &.gc {
              background:url('~@/assets/farm/gcs.png') center center no-repeat;
              background-size: auto 100%;
              // background-size: 280px 140px;
            }
            &.sc {
              background:url('~@/assets/farm/scs.png') center center no-repeat;
              background-size: auto 100%;
              // background-size: 280px 140px;
            }
            p {
              width: 100%;
              text-align: center;
              padding: 2px 0;
              margin: 2px 0;
            }
            align-items: center;
          }
          .name{
            text-align: center;
            font-size: 16px;
            line-height: 40px;
          }
          &:hover{
            transform: scale(1.1);
            .img {

              b {
              display: inline-block;
            }
            }
          }
          &:not(:last-child){
            margin-right: 30px;
          }
        }
      }
    }

  }
}

.copyright {
  flex-shrink: 0;
  width: 100%;
  text-align: center;
  color: white;
  line-height: 2;
  font-size: 10px;
  margin-bottom: 0;
  background-color: rgba(3, 65, 84, 1);
}
</style>

<style lang="scss">
.el-scrollbar__wrap {
  overflow-x: hidden;
}
.is-horizontal {
  display: none;
}
</style>
